<script setup lang="ts">

</script>

<template>
  <div class="column-center" style="background-color: #42b983">
    <div style="text-align: center">
      学科类别
    </div>
    <div style="display: flex;justify-content: center">
      <div
          style="height:200px;display: flex;justify-content: center;justify-content: space-evenly;background-color: pink;width: 800px;border-radius:15px;margin: 20px">
        <div>python</div>
        <div>java</div>
        <div>html</div>
        <div>vue3</div>
      </div>
    </div>

    <hr>

    <div style="display: flex;margin-top: 20px">
      <div style="flex: 100px;background-color: lightcoral">目录</div>
      <div style="flex: 70%;background-color: #80f0ad">
        <div style="text-align: center"> 标题</div>
        <hr>
        <div> 文本，视频，素材</div>
        <div style="height: 600px;display: flex;width: 100%">

          <div style="background-color: #99a9bf;flex: 1">
            <img src="../assets/img/wechat_2025-11-04_211423_516.png" style="height: 100%;width: 100%" alt="">
          </div>
          <div style="background-color: #e39362;width: 220px"> 学习笔记 区</div>

        </div>

        <div style="height: 250px"> 评论区</div>

      </div>
    </div>
  </div>


</template>

<style scoped lang="less">

</style>